import React, { useState, useEffect } from 'react';  
import { getProductDetails } from '../../api/axios8081';
  
 
interface ProductDetails {  
        name:string;
        imgurl: string;  
        descripe: string;  
        details: string;  
        sendAddress: string;  
        NosendAddress: string;   
        className: string;   
        supplier: string;  
        phoneNumber: string | number;  
        server: any;
        priceTypeList: Array<{  
          priceType: number;  
          score: number;  
          money: number;  
        }>;  
}  
  
// 定义组件的props接口  
interface ProductDetailsFetcherProps {  
  productId: string;  
  onFetchSuccess: (productDetails: ProductDetails) => void; 
  onFetchError?: (error: Error) => void; 
}  
  
const ProductDetailsFetcher: React.FC<ProductDetailsFetcherProps> = ({ productId, onFetchSuccess, onFetchError }) => {  
  const [isLoading, setIsLoading] = useState(false);  
  const [error, setError] = useState<Error | null>(null);  
  
  useEffect(() => {  
    const fetchData = async () => {  
      setIsLoading(true);  
      setError(null);  
  
      try {  
        if (!productId) {  
          throw new Error('商品ID不为空');  
        }  

        const response = await getProductDetails(productId); // 调用API 
  
        if (response) {  
          onFetchSuccess(response);  
          console.log(response, '这是response');  
        } else {  
          throw new Error('未提供错误信息');  
        }  
      } catch (error) {  
        console.error('从接口获取商品具体信息失败:', error);  
        if (onFetchError) {  
          onFetchError(error as Error); 
        }  
      } finally {  
        setIsLoading(false);  
      }  
    };  
  
    if (productId) {  
      fetchData();  
    }  
  }, [productId, onFetchSuccess, onFetchError]); 
  
  
  if (isLoading) {  
    return <div>加载中...</div>;  
  }  
  
  if (error) {  
    return <div>获取商品详情时出错：{error.message}</div>;  
  }  
  
  return null;  
};  
  
export default ProductDetailsFetcher;